<template>
  <el-form label-position="left" size="mini" label-width="80px" class="base-attrbute">
    <el-form-item label="单选主题：">
      <el-radio v-model="value.useless.theme" label="default" @change="changeTheme()">默认</el-radio>
      <el-radio v-model="value.useless.theme" label="border" border @change="changeTheme()">按钮</el-radio>
      <el-radio-group v-model="value.useless.theme" @change="changeTheme()">
        <el-radio-button label="button">按钮组</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <template v-if="value.useless.theme != 'default'">
      <el-form-item label="单选尺寸：">
        <el-select v-model="value.attribute.size" placeholder="请设置单选尺寸">
          <el-option label="大" value="medium"></el-option>
          <el-option label="中" value="small"></el-option>
          <el-option label="小" value="mini"></el-option>
        </el-select>
      </el-form-item>
    </template>
    <el-form-item label="选项来源：">
      <el-radio v-model="value.options.type" label="dynamic">模板</el-radio>
      <el-radio v-model="value.options.type" label="static">自定义选项</el-radio>
    </el-form-item>
    <template v-if="value.options.type =='static'">
      <div class="base-attrbute-line"></div>
      <div v-for="(option,index) in value.options.children" :key="index">
        <el-form-item label="文字：">
          <el-input v-model="option.value" placeholder="请输入选项文字"></el-input>
        </el-form-item>
        <el-form-item label="值：">
          <el-input v-model="option.label" placeholder="请输入选中的值"></el-input>
        </el-form-item>
        <el-form-item label="是否禁用：">
          <el-radio-group v-model="option.disabled">
            <el-radio :label="true">禁用</el-radio>
            <el-radio :label="false">非禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="danger" size="mini" style="width: 100%;" @click="delOption(index)">删除</el-button>
        <div class="base-attrbute-line"></div>
      </div>
      <el-button type="primary" size="mini" style="width: 100%;" @click="addOption()">添加单选项</el-button>
    </template>
  </el-form>
</template>
<script type="text/javascript">
export default {
  created() {

  },
  props: {
    value: [Array, Object]
  },
  components: {
    //Logo
  },
  data() {
    return {
      form: {
        source: false,
        theme: "2",
        options: [{
          label: "",
          value: "",
          disabled: false,
        }],
      },
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {

  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    /**
     * 添加自定义选项
     */
    addOption() {
      var obj = {
        label: "",
        value: "",
        border: this.value.useless.theme == 'border' ? true : false,
        disabled: false
      }
      this.value.options.children.push(obj)
    },

    /**
     * 删除自定义选项
     */
    delOption(index) {
      this.value.options.children.splice(index, 1)
    },

    /**
     * 根据主题加载不同的子组件
     * @return {[type]} [description]
     */
    changeTheme() {
      if (this.value.useless.theme == 'button') {
        this.value.options.tag = 'el-radio-button';
      } else {
        this.value.options.tag = 'el-radio';
      }

      for (var i = 0; i < this.value.options.children.length; i++) {
        if (this.value.useless.theme == 'border') {
          this.value.options.children[i].border = true;
        } else {
          this.value.options.children[i].border = false;
        }
      }
    }


  }
}

</script>
<style type="text/css" lang="scss">
.base-attrbute {
  padding: 10px;

  .el-radio {
    margin-right: 5px;
    margin-bottom: 5px;
  }

  .el-radio.is-bordered+.el-radio.is-bordered {
    margin-left: 0px;
  }

  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }

  .el-form--label-top .el-form-item__label {
    float: none;
    display: inline-block;
    text-align: left;
    padding: 0;
  }

  .el-form-item__label,
  .el-form-item__content {
    font-size: 12px !important;

  }

  .base-attrbute-line {
    margin: 10px 0;
    border-bottom: dashed 1px #efefef;
  }

}

</style>
